
.warp {
	width: 100%;
	min-height: 100%;
}

.header {
	height: 88rpx;
	background: linear-gradient(135deg, #00d2ff 0%, #928DAB 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30rpx;
}

.header-title {
	color: #FFFFFF;
	font-size: 36rpx;
	font-weight: bold;
}

/* 顶部按钮容器 */
.top-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background-color: #f8f8f8;
}

.message-box, .private-chat-box {
	display: flex;
}

.message-button, .private-chat-button {
	background: linear-gradient(45deg, #007AFF, #00BFFF);
	padding: 12rpx 24rpx;
	border-radius: 30rpx;
	box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
	transition: all 0.3s ease;
}

.message-button:active, .private-chat-button:active {
	transform: scale(0.95);
}

.message-text, .private-chat-text {
	color: white;
	font-size: 28rpx;
	font-weight: bold;
}

/* 发布消息区域 */
.post-message-area {
	padding: 20rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.message-input {
	width: 100%;
	min-height: 100rpx;
	background-color: #f5f5f5;
	border-radius: 10rpx;
	padding: 15rpx;
	font-size: 28rpx;
	margin-bottom: 15rpx;
}

.post-button {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #007AFF;
	color: white;
	border-radius: 10rpx;
	font-size: 30rpx;
}

/* 横栏分类样式 */
.category-tabs {
	display: flex;
	flex-direction: row;
	height: 80rpx;
	background-color: #f8f8f8;
	border-bottom: 1px solid #e0e0e0;
}

.tab-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	color: #666;
	border-bottom: 4rpx solid transparent;
}

.tab-item.active {
	color: #007AFF;
	border-bottom-color: #007AFF;
	font-weight: bold;
}

/* 帖子列表样式 */
.posts-scroll {
	flex: 1;
	height: calc(100vh - 320rpx);
}

.posts-container {
	padding: 20rpx;
}

.post-item {
	margin-bottom: 30rpx;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.post-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20rpx;
}

.user-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.user-info {
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.post-time {
	font-size: 24rpx;
	color: #999;
}

.post-content {
	margin-bottom: 20rpx;
}

.post-title {
	font-size: 30rpx;
	color: #333;
	line-height: 1.5;
	margin-bottom: 20rpx;
}

.post-image {
	width: 100%;
	height: 300rpx;
	border-radius: 10rpx;
}

.post-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.post-date {
	font-size: 24rpx;
	color: #999;
}

.chat-action {
	color: #007AFF;
	font-size: 26rpx;
	padding: 5rpx 10rpx;
	border-radius: 5rpx;
	background-color: rgba(0, 122, 255, 0.1);
}

.loading-text {
	text-align: center;
	padding: 20rpx;
	color: #999;
	font-size: 28rpx;
}

/* 帖子详情弹窗样式 */
.post-detail-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.post-detail-container {
	width: 90%;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	max-height: 80vh;
	overflow-y: auto;
}

.post-detail-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.detail-user-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.detail-user-info {
	display: flex;
	flex-direction: column;
}

.detail-username {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.detail-post-time {
	font-size: 26rpx;
	color: #999;
}

.detail-post-content {
	margin-bottom: 30rpx;
}

.detail-post-title {
	font-size: 34rpx;
	color: #333;
	line-height: 1.5;
	margin-bottom: 30rpx;
}

.detail-post-image {
	width: 100%;
	height: 400rpx;
	border-radius: 10rpx;
	margin-bottom: 30rpx;
}

.detail-post-footer {
	display: flex;
	justify-content: flex-end;
}

.detail-post-date {
	font-size: 26rpx;
	color: #999;
}

/* 联系按钮 */
.chat-with-user {
	text-align: center;
	padding: 20rpx;
	background-color: #00BFFF;
	color: white;
	border-radius: 10rpx;
	font-size: 30rpx;
	margin-bottom: 20rpx;
}

.close-button {
	text-align: center;
	padding: 20rpx;
	background-color: #007AFF;
	color: white;
	border-radius: 10rpx;
	font-size: 30rpx;
}